import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import PageWrapper from '@/components/PageWrapper'
import './index.scss'
const Type = ({ data }: { data: any[] }) => {
  return (
    <View className="community-type-box">
      {data.map((item,index)  => (
        <View key={index} className={item.checked !== 1 ? 'community-type-item' : 'community-type-item-checked'}>
          <View className="community-type-title">{item.name}</View>
        </View>
      ))}
    </View>
  );
};
const Page = () => {
  // 分类
  const typeList = [
    { name: '月度排行', index: 0 ,checked: 1},
    { name: '年度排行', index: 1 ,checked: 0},
  ];
  const headers = ['排名', '昵称', '鉴定数量', '准确率']
  const data = [
    ['1', 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg', '某某某', '2811', '28'],
    ['2', 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg', '某某某', '2511', '25'],
    ['3', 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg', '某某某', '3011', '30'],
    ['4', 'https://img03.k3cdn.com/k/1017390/2025042220079091180444w800h800_750x750.jpg', '某某某', '2211', '22'],
  ]

  return (
    <PageWrapper title="鉴定师排行" showBack={true} backgroundColor="#F0F0F0">
      <View className="my-service-page">
        <View className="my-service">
          <Image src={require(`../../../assets/home/rank.png`)} />
        </View>
        <Type data={typeList}></Type>
        <View className="title-item-box">

          <View className="no-border-table">
            <View className="table-header">
              {headers.map((header, index) => (
                <View key={index} className="cell header-cell"><Text>{header}</Text></View>
              ))}
            </View>

            {data.map((row, rowIndex) => (
              <View key={rowIndex} className="table-row">
                {row.map((cell, cellIndex) => {
                  if (cellIndex === 1) {
                    return (
                      <View key={cellIndex} className="cell name-cell">
                        <Image className="avatar" src={row[1]} />
                        <Text className="nickname">{row[2]}</Text>
                      </View>
                    )
                  }
                  if (cellIndex === 2) return null
                  return <Text key={cellIndex} className="cell">{cell}</Text>
                })}
              </View>
            ))}
          </View>
        </View>
      </View>
    </PageWrapper>
  )
}

export default Page
